<template>
  <div class="product-box">


    <el-row>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>主页</el-breadcrumb-item>
        <el-breadcrumb-item>商品管理</el-breadcrumb-item>
        <el-breadcrumb-item>库存管理</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>
    <el-row>

      <el-col :span="24">
        <el-form label-width="70px">

          <el-row :gutter="20">
            <el-col :span="6">
              <el-form-item label="商品名称">
                <el-input v-model="query.name"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="品牌">
                <el-input v-model="query.brand"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="供应商">
                <el-input></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-button @click="btnQueryClick">搜索</el-button>
            </el-col>
          </el-row>
        </el-form>
      </el-col>


    </el-row>
    <el-row></el-row>

    <el-table :data="list">
      <el-table-column type="index" label="序号"></el-table-column>
      <el-table-column property="name" label="商品名称"></el-table-column>
      <el-table-column property="price" label="价格"></el-table-column>
      <el-table-column property="brand" label="品牌"></el-table-column>
      <el-table-column property="category.name" label="类别"></el-table-column>
      <el-table-column property="supplier" label="供应商"></el-table-column>
      <el-table-column property="quantity" label="库存"></el-table-column>
      <el-table-column label="操作">

        <template #default="scope">

          <el-button type="warning">修改</el-button>
          <el-button>出库</el-button>
          <el-button @click="btnInstockClick(scope.row)">入库</el-button>
        </template>

      </el-table-column>
    </el-table>
  </div>

  <el-dialog
      v-model="info.show">
    <template #title>
      商品入库
    </template>

    <el-form label-width="120px">
      <el-form-item label="商品名称">
        <el-input v-model="info.product.name"></el-input>
      </el-form-item>
      <el-form-item label="品牌">
        <el-input v-model="info.product.brand"></el-input>
      </el-form-item>
      <el-form-item label="库存">
        <el-input v-model="info.product.quantity"></el-input>
      </el-form-item>
      <el-form-item label="入库数量">
        <el-input v-model="info.quantity"></el-input>
      </el-form-item>

      <el-form-item>
         <el-button type="warning" @click="btnInstockSubmit">入库</el-button>
      </el-form-item>
    </el-form>

  </el-dialog>
</template>

<script>


export default {
  name: "Product",
  data() {
    return {
      list: [],
      info: {
        show: false,
        product:{

        },
        quantity:0
      },query:{
          name:'',
          brand:''
      }
    }
  },
  mounted() {


   this.initList();


  }, methods: {
    initList(){
      this.axios({
        url: 'http://localhost:8080/pro/list',
        method: 'get',
        dataType: 'json'
      }).then((res) => {
        this.list = res.data;
      })
    },
    btnInstockClick(row) {
      this.info.show = true;
      this.info.product = row;

    },


    btnInstockSubmit(){

       this.axios({
          url:'http://localhost:8080/pro/instock',
          method:'post',
          dataType:'json',
          params: {
              productId:this.info.product.productId,
              quantity:this.info.quantity
          }
       }).then((res)=>{
           if(res.data.success){
                this.initList();
                this.info.show=false;
           }

       })
    },btnQueryClick(){
          this.axios({
            url:'http://localhost:8080/pro/get',
            method:'get',
            dataType:'json',
            params:this.query
          }).then((res)=>{
               this.list = res.data.data;

          })
    }
  }
}
</script>

<style scoped>
.product-box {
  margin-top: 200px;
  margin-left: 300px;


}

.el-row {
  margin-top: 10px;
}


</style>